<template>
    <div>
        <van-nav-bar title="购物车" />
        <van-card
            v-for="item in carts"
            :num="item.count"
            :price="item.price"
            :title="item.title"
            :thumb="'http://localhost:3000/' + item.product_images[0].url"
        >
            <template #tags v-if="item.product_labels.length">
                <van-tag
                    style="margin: 0 4px"
                    v-for="label in item.product_labels"
                    plain
                    type="primary"
                    >{{ label.name }}</van-tag
                >
            </template>
            <template #footer>
                <van-button size="small" @click="handleAddCart(item)">
                    +1
                </van-button>
                <van-button size="small" @click="handleRemoveCart(item)">
                    -1
                </van-button>
            </template>
        </van-card>

        <van-action-sheet
            v-model:show="positionAction.show"
            title="选择收货地址"
        >
            <div style="padding: 40px 20px">
                <div
                    v-for="item in positions"
                    :key="item.id"
                    style="border-bottom: 1px solid #eee; padding-bottom: 10px"
                    @click="handleAddOrder(item)"
                >
                    {{ item.position }}
                </div>
            </div>
        </van-action-sheet>

        <div class="buy" v-if="carts.length" @click="handleBuy">全部购买</div>
    </div>
</template>

<script setup>
import { useStore } from "vuex";
import { computed, ref } from "vue";
import { showToast, Toast } from "vant";
import { useRouter } from "vue-router";
import { addOrder } from "@/api/basic";

const router = useRouter();
const store = useStore();

const positionAction = ref({
    show: false,
});

const carts = computed(() => {
    return store.getters.carts;
});

const userInfo = computed(() => {
    return store.getters.userInfo;
});

const positions = computed(() => {
    return store.getters.positions;
});

if (!userInfo.value.id) {
    showToast("未登录");
    setTimeout(() => {
        router.replace({
            path: "/login",
        });
    }, 600);
}

const handleAddCart = (item) => {
    store.commit("ADD_CARTS", item);
};

const handleRemoveCart = (item) => {
    store.commit("REMOVE_CARTS", item);
};

const handleBuy = async () => {
    positionAction.value.show = true;
};

const handleAddOrder = async (item) => {
    const orders = [];
    for (let i = 0; i < carts.value.length; i++) {
        const cart = carts.value[i];
        orders.push({
            productId: cart.id,
            userId: userInfo.value.id,
            price: cart.price,
            position: item.position,
        });
    }
    const { result } = await addOrder({
        orders,
        returnUrl: "http://localhost:8888",
    });
    showToast("购买成功");
    store.commit("CLEAR_CARTS");
    window.open(result);
    positionAction.value.show = false;
};
</script>

<style scoped>
.buy {
    width: 100%;
    padding: 10px;
    display: flex;
    align-items: center;
    justify-content: center;

    position: absolute;
    bottom: 60px;
    background-color: red;
    color: #fff;
    border-radius: 20px;
}
</style>
